<template>
  <el-popover placement="bottom" popper-class="sms" transition="el-zoom-in-top" trigger="click" :width="sms.width" :offset="sms.offset">

    <!-- 消息通知按钮 -->
    <template slot="reference">
      <i class-name="size-icon" class="el-icon-bell size-svg">
        <el-badge v-if="conList.length" :value="conList.length" :max="99" />
      </i>
    </template>

    <!-- 消息通知弹框 -->
    <div>
      <el-tabs v-model="sms.activeName">
        <el-tab-pane label="通知" class="sms-item" name="通知">
          <div v-if="!smsList.length" class="noMessage">
            <img src="@/assets/images/noMessage.png" alt="">
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`合同 (${conList.length})`" class="sms-item" name="合同">
          <div v-if="conList.length">
            <el-row v-for="(item, key) in conList" :key="key" type="flex" class="sms-content" :gutter="20">
              <el-col :span="2" />
              <el-col :span="4">
                <svg-icon class="sms-icon" icon-class="yiguoqi" />
              </el-col>
              <el-col :span="15" class="sms-desc">
                <span class="title">{{ item.title }}</span>
                <span class="time">{{ item.date }}</span>
              </el-col>
            </el-row>
          </div>
          <div v-else class="noMessage">
            <img src="@/assets/images/noMessage.png" alt="">
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="clearSms">
      清空未读{{ sms.activeName }}
    </div>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      // 消息通知
      sms: {
        val: 12,
        width: '300',
        offset: 0,
        activeName: '合同'
      },
      // 通知列表
      smsList: [],
      // 合同列表
      conList: [
        {
          id: 1,
          title: 'No.202104015 已过期',
          date: '2019-05-08 14:33:18',
          status: 0
        },
        {
          id: 2,
          title: 'No.202104015 已过期',
          date: '2019-05-08 14:33:18',
          status: 0
        },
        {
          id: 3,
          title: 'No.202104015 已过期',
          date: '2019-05-08 14:33:18',
          status: 0
        },
        {
          id: 4,
          title: 'No.202104015 已过期',
          date: '2019-05-08 14:33:18',
          status: 0
        },
        {
          id: 5,
          title: 'No.202104015 已过期',
          date: '2019-05-08 14:33:18',
          status: 0
        }
      ]
    }
  }
}
</script>

<style>
.sms {
  margin-top: 34px !important;
  padding: 5px 0 !important;
  text-align: left !important;
}
</style>

<style lang="scss" scoped>
$status: 34px;
$sms-height: 250px;

.sms-item {
  min-height: $sms-height;
  max-height: $sms-height;
  overflow: auto;
  overflow-x: hidden;
  .sms-content {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1.3px solid #e8eaec;
    min-height: 65px;

    .sms-icon {
      font-size: 35px;
    }

    .sms-desc {
      span {
        display: block;
      }
      .title {
        color: #303133;
        font-size: 14px;
        margin: 0 0 5px 0;
      }
      .time {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

.size-svg {
  position: relative;
  cursor: pointer;
  font-size: 18px !important;
  vertical-align: -1.8px !important;
  margin: 0 12px 0 -5px;
}

.clearSms {
  text-align: center;
  line-height: 2.5;
  &:hover {
    color: #409eff;
    cursor: pointer;
  }
}

.noMessage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(#{$sms-height} - 10px);

  img {
    width: 150px;
  }
}

::v-deep .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 0.5px;
}

::v-deep .el-tabs__header {
  margin: 0 !important;
}

::v-deep .el-badge {
  position: absolute;
  top: -11px;
  left: 7px;
}
</style>
